<template>
    <div id="app">
        <h1>{{title}}</h1>
        <input type="text" v-model="project" v-on:keyup.enter="addproject">
        <p><button v-on:click="addproject" >添加</button></p>
        <ul>
            <li v-for="(todo,index) in todos"
                :id="index">
                <lable><span v-bind:class="{del: todo.done}">{{index+1}}.{{todo.value}}</span></lable>
                <time>{{todo.created|date}}</time>
            </li>
        </ul>
        <div>共{{todos.length}}个待办事项,其中已完成{{done}}个,还有{{todos.length-done}}未完成</div>
        <aaa :total="todos.length" :done="done"/>
    </div>
</template>
<style>.del{text-decoration: line-through}</style>


<script>
    import aaa from './Todo.vue'
    import moment from 'moment'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')

    export default {
        name: 'app',
        components:{aaa},
        methods: {
            addproject: function () {
                this.todos.push({value:this.project,done:false});
            }
        },
        computed:{
            done: function () {
                var count=0;
                for(var i=0;i<this.todos.length;i++){
                    if(this.todos[i].done){
                        count++;
                    }
                }
                return count;
            }
        },
        data () {

            return {
                title:'vue-todos',
                todos:[
                    {value:"阅读一本关于前端开发的书",done:false,created:Date.now()},
                    {value:"补充范例代码",done:true,created:Date.now()},
                    {value:"写心得",done:false,created:Date.now()}
                ]
            }
        },
        filters:{
            date(val)
            {

                return moment(val).calendar()
            }
        }
    }
</script>